<template>
  <div id="user">
    用户列表
    <el-card>
      <!-- 标题 -->
      <!-- 用户列表 -->
      <el-menu
            :default-active="activeIndex"
            router
            mode="horizontal"
            class="el-menu-demo"
          >
          <el-menu-item index="/user">用户列表</el-menu-item>
          </el-menu>
        <div class="buttonWrap">
         <el-button size="large">导出数据</el-button>
        </div>
      <!-- </div> -->
      <el-form :rules="findUserRules" class="userForm" :model="userForm" label-width="150px" label-position="right" width="100%">
        <!-- 第一行 -->
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="高考年份：" prop="testYear">
              <el-input v-model="userForm.testYear"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="高考省份/城市：" prop="testCity">
              <el-input v-model="userForm.testCity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="填报意向省份/城市：" prop="pickCity">
              <el-input v-model="userForm.pickCity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="报考科目类别：" prop="testMajor">
              <el-input v-model="userForm.testMajor"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="分数段：">
              <el-form-item prop="testMarkStart">
                <el-input class="inputWidth" v-model="userForm.testMarkStart"></el-input>
              </el-form-item>
              <span class="line">-</span>
              <el-form-item prop="testMarkEnd">
                <el-input class="inputWidth" v-model="userForm.testMarkEnd"></el-input>
              </el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间：">
              <el-form-item prop="regTimeStart">
                <el-input class="inputWidth" v-model="userForm.regTimeStart"></el-input>
              </el-form-item>
              <span class="line">-</span>
              <el-form-item prop="regTimeEnd">
                <el-input class="inputWidth" v-model="userForm.regTimeEnd"></el-input>
              </el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="关注学校：" prop="pickSchool">
              <el-input v-model="userForm.pickSchool"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="关注专业：" prop="pickMajor">
              <el-input v-model="userForm.zzzzzzz"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="queryButton">
            <el-button type="success" @click="getFindUser">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-table class="tableInfo" :data="userTableForm" width="100%" ref="multipleTableRef"
        :header-cell-style="{ 'text-align': 'center' }"
         :cell-style="{ 'text-align': 'center' }"
          @selection-change="handleSelectionChange">
        <el-table-column  type="selection" />
        <el-table-column  property="Aname" label="昵称"></el-table-column>
        <el-table-column  property="Ayear" label="高考年份"></el-table-column>
        <el-table-column  property="province" label="省份/市"></el-table-column>
        <el-table-column  property="intention" label="意向省/市"></el-table-column>
        <el-table-column  property="Afraction" label="高考分数"></el-table-column>
        <el-table-column  property="phone" label="手机号"></el-table-column>
        <el-table-column  property="qq" label="QQ"></el-table-column>
        <el-table-column  property="date" label="注册日期"></el-table-column>
        <el-table-column  property="subject" label="报考科目"></el-table-column>
        <el-table-column  label="详情" width="90">
          <template #default="scope">
           <el-button type="success" @click="getCheckUser(scope.row)" class="success">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="getEditUser(scope.row)" type="primary">编辑</el-button>
            <el-button @click="getDelUser(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
       <!-- 批量删除 分页-->
      <div class="allDelWrap">
        <el-button class="allDelBtn" text @click="getAllDel"
          >批量删除</el-button
        >
      </div>
      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </el-card>
    <!-- 编辑用户信息对话框开始 -->
    <el-dialog v-model="editUserDialogVisible" width="50%" title="用户信息编辑" :center="true">
      <el-form :model="editForm" ref="editForms" class="editDialogWrap" label-position="right" label-width="140px">
        <el-row :gutter="24">
          <el-col :span="1"></el-col>
          <el-col :span="14">
            <el-form-item label="昵称：" prop="Aname">
              <el-input v-model="editForm.Aname"></el-input>
            </el-form-item>
            <el-form-item label="省份/直辖市：" prop="province">
              <el-input v-model="editForm.province"></el-input>
            </el-form-item>
            <el-form-item label="高考年份：" prop="Ayear">
              <el-input v-model="editForm.Ayear"></el-input>
            </el-form-item>
            <el-form-item label="意向填报地区：" prop="intention">
              <el-input v-model="editForm.intention"></el-input>
            </el-form-item>
            <el-form-item label="报考科目类别：" prop="subject">
              <el-input v-model="editForm.subject"></el-input>
            </el-form-item>
            <el-form-item label="高考分数：" prop="Afraction">
              <el-input v-model="editForm.Afraction"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="QQ：" prop="qq">
              <el-input v-model="editForm.qq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9"></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1"></el-col>
          <el-col :span="20">
            <el-form-item label="备注信息：" prop="introduce">
              <!-- 输入文本 -->
              <el-input type="textarea" resize="none" v-model="editForm.introduce" maxlength="1000" placeholder="请输入内容"
                rows="10" style="width:454px" show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button @click="editUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editConfirmBtn">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑用户信息对话框结束 -->
    <!-- 查看详细信息对话框开始 -->
    <el-dialog v-model="checkUserDialogVisible" width="50%" title="用户详细信息" :center="true">
      <el-form :model="checkForm" ref="checkForms" class="editDialogWrap" label-position="right" label-width="140px">
        <el-row :gutter="24">
          <el-col :span="1"></el-col>
          <el-col :span="14">
            <el-form-item label="昵称：" prop="checkPetName">
              <p>{{checkForm.checkPetName}}</p>
            </el-form-item>
            <el-form-item label="省份/直辖市：" prop="checkCity">
              <p>{{checkForm.checkCity}}</p>
            </el-form-item>
            <el-form-item label="高考年份：" prop="checkTestYear">
              <p>{{checkForm.checkTestYear}}</p>
            </el-form-item>
            <el-form-item label="意向填报地区：" prop="checkPickCity">
              <p>{{checkForm.checkPickCity}}</p>
            </el-form-item>
            <el-form-item label="报考科目类别：" prop="checkTestMajor">
              <p>{{checkForm.checkTestMajor}}</p>
            </el-form-item>
            <el-form-item label="高考分数：" prop="checkTestMark">
              <p>{{checkForm.checkTestMark}}</p>
            </el-form-item>
            <el-form-item label="手机号：" prop="checkTelNumber">
              <p>{{checkForm.checkTelNumber}}</p>
            </el-form-item>
            <el-form-item label="QQ：" prop="checkqq">
              <p>{{checkForm.checkqq}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="9"></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1"></el-col>
          <el-col :span="20">
            <el-form-item label="备注信息：" prop="checkRemark">
              <p>{{checkForm.checkRemark}}</p>
              <!-- 输入文本 -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button type="primary" @click="checkUserDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看详细信息对话框结束 -->
  </div>
</template>

<script>
import { reactive, toRefs, ref, toRaw } from 'vue'
import { userList, findUser, delUser,editUser, idFindUser } from '../api/axiosPlus.js'
export default {
  name: '',
  components: {},
  setup() {
    const findUserRules = reactive({
      testYear: [{required: true, message: '高考年份不能为空',trigger: 'blur'}],
      testCity: [{required: true, message: '高考省份/城市不能为空',trigger: 'blur'}],
      pickCity: [{required: true, message: '填报意向省份/城市不能为空',trigger: 'blur'}],
      testMajor: [{required: true, message: '报考科目类别不能为空',trigger: 'blur'}],
      // testMarkStart: [{}],
      // testMarkEnd: [{}],
      // regTimeStart: [{}],
      // regTimeEnd: [{}],
    })
    const activeIndex = ref('/user')
    const data = reactive({
      // 查看用户信息 对话框显示状态
      checkUserDialogVisible: false,
      // 编辑用户 对话框数据
      editForm: {},
      // 编辑用户 对话框显示状态
      editUserDialogVisible: false,
      // 表格数据
      userTableForm: '', 
      // 用户查询数据
      userForm: {
        testYear: '',
        testCity: '',
        pickCity: '',
        testMajor: '',
        testMarkStart: '',
        testMarkEnd: '',
        regTimeStart: '',
        regTimeEnd: '',
        pickSchool: '',
        pickMajor: ''
      },
      // 查看用户 表单数据
      checkForm: {
        checkPetName: '',
        checkCity: '',
        checkTestYear: '',
        checkCickCity: '',
        checkTestMajor: '',
        checkTestMark: '',
        checkTelNumber: '',
        checkqq: '',
        checkRemark: '',
      }
    })
    // 批量删除数据
    const tableList = [] 
    let tableSelect = []
    // 选中的数据
    const handleSelectionChange = (val) => {
      console.log(111);
      console.log(val);
      tableSelect = toRaw(tableList)
      tableSelect = val.map(v => v.A_id)
      // console.log(v);
      // console.log(tableSelect.length); 
      // console.log(tableSelect);

    }
   
    // 批量删除
    const getAllDel = () => {
      
      const delArr = tableSelect.join(',')
      // console.log(delArr);
      if(tableSelect.length == 0){
        ElMessage({
          message: '请选择需要删除的数据',
          type: 'warning'
        })
      }else{
        ElMessageBox.confirm(
        '确认删除这'+tableSelect.length+'条数据吗?',
        '温馨提示：',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then ( async () => {
          let pamas = {
            params: {
              id: delArr
            }
          }
          const res = await delUser(pamas)
          console.log(res);
          if (res.status == 201) {
          ElMessage({
            type: 'success',
            message: '删除成功',
            duration: 1000,
          })
        }
          // 更新页面表格数据
          getSpeciltyList()
        }).catch(() => {
          ElMessage({
          type: 'warning',
          message: '已取消删除！',
          duration: 1000,
        })
        } )

      }
    }
    // 点击删除按钮
    const getDelUser = (e) => {
      ElMessageBox.confirm(
        '确认删除这条数据吗?',
        '温馨提示：',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then( async () => {
          let pamas = {
            params: {
              id: e.A_id
            }
          }
          const res = await delUser(pamas)
          // console.log(res);
          if(res.status == 201 ){
            ElMessage({
              type: 'success',
              message: '删除成功！',
              duration: 1000,
            })
          }
          // 更新页面表格数据
          getUserList()
        }).catch(() => {
          ElMessage({
            type: 'warning',
            message: '已取消删除！',
             duration: 1000,
          })
        })
    }
    // 点击 编辑对话框的确认按钮
    const editConfirmBtn = async () => {
      data.editUserDialogVisible = false
      // console.log(data.editForm);
      // 将修改后的数据提交到数据库
      let arr = {
        Aname: data.editForm.Aname,
        Ayear:data.editForm.Ayear,
        province:data.editForm.province,
        intention:data.editForm.intention,
        Afraction:data.editForm.Afraction,
        phone:data.editForm.phone,
        qq:data.editForm.qq,
        date:data.editForm.date,
        subject:data.editForm.subject,
        introduce:data.editForm.introduce,
        id: data.editForm.A_id,
      }
      // console.log(arr);
      let res = await editUser(arr)
      // console.log(res);
      if( res.status == 200 ) {
          getUserList()
          ElMessage({
          showClose: true,
          message: '修改成功！',
          type: 'success',
          duration: 2000,
        })
      }else {
        ElMessage({
          type: 'error',
          message: res.message,
          duration: 2000,
        })
      }
    }
    //点击按钮 编辑用户信息
    const getEditUser = async (e) => {
      data.editUserDialogVisible = true
      // console.log(e)
      let pamas = {
        params: {
          id: e.A_id
        }
      }
      const res = await idFindUser(pamas)
      // console.log(res);
      data.editForm = res.data[0]
    }
    
    // 点击按钮 查看详细信息
    const getCheckUser = (e) => {
      console.log(e);
      data.checkUserDialogVisible = true
      data.checkForm.checkPetName = e.Aname,
      data.checkForm.checkCity = e.province,
      data.checkForm.checkTestYear = e.Ayear,
      data.checkForm.checkPickCity = e.intention,
      data.checkForm.checkTestMajor = e.subject,
      data.checkForm.checkTestMark = e.Afraction,
      data.checkForm.checkTelNumber = e.phone,
      data.checkForm.checkqq = e.qq,
      data.checkForm.checkRemark = e.introduce
    }
    // 点击按钮 模糊查询
    const getFindUser = async () => {
      let arr = {
        Ayear: data.userForm.testYear,
        province: data.userForm.testCity,
        intention: data.userForm.pickCity,
        subject: data.userForm.testMajor,
        Afractionmin: data.userForm.testMarkStart,
        Afractionmax: data.userForm.testMarkEnd,
        datemin: data.userForm.regTimeStart,
        datemax: data.userForm.regTimeEnd,
        // : data.userForm.pickSchool,
        // : data.userForm.pickMajor,
      }
      // console.log(arr);
      let res = await findUser(arr)
      // console.log(res.result);
      data.userTableForm = res.result
      console.log(data.userTableForm);
    }
    // 获取用户列表数据
    const getUserList = async () => {
      // 获取总条数
      let pamas = {
        params: {
          pagenum: 1,
          pagesize: 10
        }
      }
      let res = await userList(pamas)
      // console.log(res.result);
      data.userTableForm = res.result
    }
    return {
      ...toRefs(data),
      findUserRules,
      getAllDel,
      activeIndex,
      getCheckUser,
      editConfirmBtn,
      getEditUser,
      getDelUser,
      getUserList,
      getFindUser,
      tableList,
      tableSelect,
      handleSelectionChange,
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<style lang="less" scoped>
.el-menu {
  border-bottom: 0px;
  width: 300px;
}
.el-menu-item {
  border-bottom: 2px solid #666;
  line-height: 40px;
  margin-left: 0px;
  margin-right: 5px;
}
#user {
  .el-card {

    // 导出数据按钮
    .buttonWrap {
      display: flex;
      justify-content: flex-end;
      margin-top: -40px;

      .el-button {
        color: #fff;
        background-color: #1EB96B;
        font-size: 14px;
        margin-left: 24px;
        width: 120px;
      }
    }

    .userForm {
      margin-top: 20px;
      margin-left: -69px;

      .line {
        margin: 0 10px;
      }

      .el-form-item {
        .inputWidth {
          width: 75px;
        }
      }

      .queryButton {
        display: flex;
        justify-content: flex-end;

        .el-button {
          color: #fff;
          background-color: #27B148;
          border-color:#27B148;
          width: 80px;
          height: 30px;
          font-size: 14px;
        }
      }

    }

    .tableInfo {
      margin-top: 10px;
      border: 1px solid #C4C7CB;
      .success {
        color: #fff;
        background-color: #27B148;
        border-color: #27B148;
      }
    }
  }
  // 批量删除
  .allDelWrap {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
  }
  // 分页器
  .el-pagination {
      margin-top: 10px;
      justify-content: center;
    }
  .dialogFooter {
    .el-button {
      margin: 0 20px
    }
  }
}
/deep/.el-table th.el-table__cell.is-leaf{
    background: #E6F1FF;
}

/deep/.el-pagination.is-background .btn-next, 
/deep/.el-pagination.is-background .btn-prev, 
/deep/.el-pagination.is-background .el-pager .number{
    border: 1px solid #E8E8E8;
    background: #fff;
}

/deep/.el-pagination{
    justify-content: center;
}

/deep/.el-pagination.is-background .el-pager li:not(.is-disabled).is-active{
    background: #fff;
    color: #4C555D;
    font-weight: 500;
    border: 1px solid #1684FC;
}

/deep/.el-pager li.btn-quicknext, 
/deep/.el-pager li.btn-quickprev {
    border: 1px solid #E8E8E8;
    background: #fff;
}
</style>
